<template>
  <el-dialog
    v-model="visible"
    :close-on-click-modal="false"
    :title="dialogTitle"
    draggable
    width="800px"
    @close="onClose"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="formRef"
      label-position="left"
      :disabled="isDisabled"
      label-width="auto"
    >
      <el-form-item label="联系人名称" prop="contacts">
        <el-input
          v-model="form.contacts"
          maxlength="20"
          placeholder="请输入"
          input-style="width: 200px"
          clearable
        />
      </el-form-item>
      <el-form-item label="联系人方式" prop="contactsMobile">
        <el-input
          v-model="form.contactsMobile"
          placeholder="请输入"
          input-style="width: 200px"
          clearable
        />
      </el-form-item>
      <el-form-item label="地址" prop="site">
        <el-input
          v-model="form.site"
          maxlength="65"
          placeholder="请输入"
          input-style="width: 200px"
          clearable
        />
      </el-form-item>
      <el-form-item label="企业名称" prop="enterpriseName">
        <el-input
          v-model="form.enterpriseName"
          placeholder="请输入"
          maxlength="20"
          input-style="width: 200px"
          clearable
        />
      </el-form-item>
      <el-form-item label="营业执照照片" prop="businessLicense">
        <ImageUploadByType
          v-model="form.businessLicense"
          :isShowTip="false"
          uploadType="1"
          :limit="1"
          :fileSize="10"
        />
      </el-form-item>
      <el-form-item label="支付方式" v-if="form.payWay === 1" prop="payWay">
        <el-tag type="info">微信支付</el-tag>
      </el-form-item>
      <el-form-item label="押金凭证照片" v-else prop="voucher">
        <ImageUploadByType
          v-model="form.voucher"
          :isShowTip="false"
          uploadType="1"
          :limit="1"
          :fileSize="10"
        />
      </el-form-item>

      <el-form-item label="押金" prop="payMoney">
        <el-input v-model="form.payMoney" placeholder="请输入" input-style="width: 200px" />
      </el-form-item>
      <el-form-item v-show="_show && _immediate" label="关联设备">
        <el-select v-model="form.machineType" placeholder="请选择" clearable>
          <el-option
            v-for="item in machineTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <ApiSelect
          :params="{ machineType: form.machineType, pageNum: 1, pageSize: 1000 }"
          v-model="form.machineId"
          :api="getDeviceList"
          valueField="machineId"
          labelField="machineName"
          resultField="rows"
          clearable
          :immediate="_immediate"
          @change="change"
        />
      </el-form-item>
    </el-form>
    <div v-show="props.dialogTitle !== '详情'" style="display: flex; justify-content: flex-end">
      <el-button @click="cancel">{{ props.dialogTitle === '编辑' ? '取消' : '拒绝' }}</el-button>
      <el-button type="primary" @click="confirm()">{{
        props.dialogTitle === '编辑' ? '确认' : '下一步'
      }}</el-button>
    </div>
  </el-dialog>
  <associatedDialog @modifyData="modifyData" ref="associatedRef" />
</template>
<script setup>
import { formRules } from '@/utils/valid/formRules'
import associatedDialog from './associatedDialog '
import { getEnterpriseUserIdApi, putEnterpriseUserApi } from '@/api/system/enterpriseUser'
import { listDataApi } from '@/api/system/dict/data'
import { getDeviceList } from '@/api/device'

const props = defineProps({
  dialogTitle: {
    type: String
  }
})
const visible = ref(false)
const formRef = ref()
const rules = ref({
  contactsMobile: formRules.phone,
  contacts: [{ required: true, message: '联系人名称不能为空', trigger: ['blur', 'change'] }],
  site: [{ required: true, message: '地址不能为空', trigger: ['blur', 'change'] }],
  enterpriseName: [{ required: true, message: '企业名称不能为空', trigger: ['blur', 'change'] }],
  businessLicense: [{ required: true, message: '营业执照不能为空', trigger: ['blur', 'change'] }],
  voucher: [{ required: true, message: '押金凭证不能为空', trigger: ['blur', 'change'] }],
  payMoneyt: [{ required: true, message: '押金不能为空', trigger: ['blur', 'change'] }]
})
const form = ref({
  contacts: null,
  contactsMobile: null,
  site: null,
  enterpriseName: null,
  businessLicense: null,
  payWay: null,
  voucher: null,
  payMoneyt: null,
  machineType: null,
  machineId: null,
  status: null
})
const isDisabled = computed(() => props.dialogTitle === '详情')
const _show = computed(() => props.dialogTitle !== '审核详情')
const _immediate = computed(() => {
  if (form.value.machineId || form.value.machineType || form.value.machineId === '') {
    return true
  } else {
    return false
  }
})
const associatedRef = ref()
const machineTypeList = ref()

/**根据不同的状态进行确认步骤 */
function confirm() {
  if (props.dialogTitle === '编辑') {
    formRef.value.validate((valid) => {
      if (valid) {
        putEnterpriseUserApi(form.value).then(() => {
          emits('refreshList')
          visible.value = false
        })
      }
    })
  } else {
    associatedRef.value.init()
  }
}
/**下拉框选中的设备id、设备名称 */
function change(ev, option) {
  form.value.machineName = option.machineName
}
/**小弹窗修改 form 数据,审核下一步 */
async function modifyData(data) {
  form.value.machineType = data.machineType
  form.value.machineId = data.machineId
  form.value.machineName = data.machineName
  form.value.status = 2
  console.log(form.value)
  await putEnterpriseUserApi(form.value)
  emits('refreshList')
  visible.value = false
}
/**根据不同的状态进行取消步骤 */
async function cancel() {
  if (props.dialogTitle === '审核详情') {
    form.value.status = 1
    await putEnterpriseUserApi(form.value)
    emits('refreshList')
  }
  visible.value = false
}

/**初始化 */
function init(id) {
  visible.value = true
  getEnterpriseUserIdApi({ id }).then((res) => {
    form.value = res.data
    form.value.machineType = res.data.machineType ? res.data.machineType + '' : res.data.machineType
    console.log('machineId', form.value.machineId)
    if (!form.value.machineType) return
    listDataApi({ dictType: 'device_type' }).then((res) => {
      console.log(res)
      machineTypeList.value = res.rows.map((item) => {
        return {
          value: item.dictValue,
          label: item.dictLabel
        }
      })
    })
  })
}

watch(
  () => [form.value.voucher, form.value.businessLicense],
  () => {
    if (form.value.voucher && Array.isArray(form.value.voucher) && form.value.voucher.length > 0) {
      form.value.voucher = form.value.voucher[0].url
    }
    if (
      form.value.businessLicense &&
      Array.isArray(form.value.businessLicense) &&
      form.value.businessLicense.length > 0
    ) {
      form.value.businessLicense = form.value.businessLicense[0].url
    }
  },
  { deep: true }
)
function onClose() {
  form.value = {
    contacts: null,
    contactsMobile: null,
    site: null,
    enterpriseName: null,
    businessLicense: null,
    payWay: null,
    voucher: null,
    payMoneyt: null,
    machineType: null,
    machineId: null,
    status: null
  }
}

const emits = defineEmits(['refreshList'])

defineExpose({
  init
})
</script>
<style lang="scss" scoped>
.el-input {
  width: 215px;
}
</style>
